 <template>
  <el-dialog
    :visible.sync="visible"
    class="my-dialog-name"
    @close="$emit('update:show', false)"
    :show="show"
    :title='title'
    
     width="50%"
  >
<!-- Form -->
    <el-form
        :size="size"
        inline
        :label-width="labelWidth"
        :model="searchData"
         ref="searchData"
        :rules="rules"
        class="formClass"
      >
        <template v-for="item in searchForm" >
          <el-form-item
            v-if="item.isFormItemShow"
            :label="item.label"
            :key="item.prop"
            :prop="item.prop"
            :label-width="item.width"
          >
          <!-- checkbox -->
             <el-checkbox-group  v-if="item.type==='Checkbox'"
        v-model="searchData[item.prop]">
         <el-checkbox v-for="sel in item.props"
                  :key="sel.id"
                  :label="sel.name"
                  :value="sel.id"
                  @change="item.change(searchData[item.prop])"
                  ></el-checkbox>

             </el-checkbox-group>
                <!-- switch -->
                
            <el-switch   v-if="item.type==='switch'" 
                v-model="searchData[item.prop]"
              @change='switchChang(searchData[item.prop])'></el-switch>
            <!-- input -->
            <el-input
              v-if="item.type==='Input'"
              v-model="searchData[item.prop]"
              size="small"
              :placeholder="item.placeholder"
              :disabled="item.disabled"
            ></el-input>
            <!-- Data -->
               <el-date-picker type="date"  v-if="item.type==='Data'" :placeholder="item.placeholder" 
               v-model="searchData[item.prop]"></el-date-picker>
            <!-- select -->
            <el-select
              v-if="item.type==='Select'"
              v-model="searchData[item.prop]"
              :placeholder="item.placeholder"
              size="small"
              @change="item.change(searchData[item])"
            >
              <el-option
                v-for="op in item.props"
                :label="op.label"
                :value="op.value"
                :key="op.value"
              ></el-option>
            </el-select>
            <!-- textarea-->
            <el-input
              v-if="item.type==='TextArea'"
              v-model="searchData[item.prop]"
              type="textarea"
              size="small"
              :placeholder="item.placeholder"
              :disabled="item.disabled"
            ></el-input>
            <!--tree-->
            <el-tree
              v-if="item.type==='Tree'"
              ref="tree"
              :data="item.props"
              show-checkbox
              default-expand-all
              node-key="id"
              highlight-current
              :props="defaultProps"
              :default-checked-keys="checkedDedault"
              @check-change="getCheckedKeys"
            />
         
          </el-form-item>
          
        </template>
      </el-form>

   
    <!-- </div> -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="cnacel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title:{
        type: String,
        default:''
    },
    visibleLabel:{
      type:Array,
     default() {
          return [];
        },
    },
    
    labelWidth: {
      type: String,
      default: "100px"
    },
    size: {
      type: String,
      default: "small"
    },
    searchForm: {
      type: Array,
       default() {
          return [];
        },
    },
    searchData: {
      type: Object,
      default() {
          return {};
        },
    },
    formEditType: {
      type: String,
      default: "add"
    },
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    checkedDedault: {
      type: Array
    },
     rules: {
      type: Object,
       default() {
          return {};
        },
    },
 
  },
  data() {
    return {
      visible: this.show,
      checkList:this.list

    };
  },
  computed:{
    
  },
  watch: {
    show() {
      this.visible = this.show;
    },
  },
  methods: {
    cnacel() {
      // this.visible = false;
      this.$emit('cnacel')
    },
    confirm() {
      // this.visible = false;
      this.$emit('confirm')
    },
    // switch开关事件
    switchChang(val){
    console.log('子组件',val)
     this.$emit('switchChang',val)
    }
  },
};
</script>

<style lang="less" >
 .my-dialog-name{ 
    .el-dialog__header{ 
      text-align: left;
      background-color: #1482f0;
      border-bottom: 1px solid #e8eaec;
      .el-dialog__body {
      }
      .el-dialog__footer {
        text-align: center;
      }
       .el-dialog__title,.el-dialog__headerbtn i{
      color: white;
    }

    }
  }
  .el-input{
    width: 300px;
  }

</style>